{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '其他插件:example/other/index', '输入微调器组件'])}

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">输入微调器组件 bootstrap-touchspin</div>
        </header>
        <div class="card-body">
        
          <div class="row">
          <div class="col-md-6">
            <div class="mb-3">
              <label for="example-attr" class="form-label">使用data-属性配置示例</label>
              <input type="text" id="example-attr" name="example-attr" class="form-control" value="55"   
              data-bts-min="0"
              data-bts-max="100"
              data-bts-init-val=""
              data-bts-step="1"
              data-bts-decimal="0"
              data-bts-step-interval="100"
              data-bts-force-step-divisibility="round"
              data-bts-step-interval-delay="500"
              data-bts-prefix=""
              data-bts-postfix=""
              data-bts-prefix-extra-class=""
              data-bts-postfix-extra-class=""
              data-bts-booster="true"
              data-bts-boostat="10"
              data-bts-max-boosted-step="false"
              data-bts-mousewheel="true"
              data-bts-button-down-class="btn btn-secondary"
              data-bts-button-up-class="btn btn-secondary"/>
            </div>
            <div class="mb-3">
              <label for="example-postfix" class="form-label">带后缀的示例</label>
              <input type="text" id="example-postfix" class="form-control" value="55" name="example-postfix" />
            </div>
            <div class="mb-3">
              <label for="example-prefix" class="form-label">带前缀的示例</label>
              <input type="text" id="example-prefix" class="form-control" value="0" name="example-prefix" />
            </div>
            <div class="mb-3">
              <label for="example-empty" class="form-label">空值的初始化</label>
              <input type="text" id="example-empty" class="form-control" value="" name="example-empty" />
            </div>
            <div class="mb-3">
              <label for="example-button-postfix" class="form-label">按钮后缀(v4中无效，加btn会影响整个元素的高度)</label>
              <input type="text" id="example-button-postfix" class="form-control" name="example-button-postfix" />
            </div>
            <div class="mb-3">
              <label for="example-button-class" class="form-label">更改按钮类</label>
              <input type="text" id="example-button-class" class="form-control" name="example-button-class" />
            </div>
            <div class="mb-3">
              <label for="example-boundaries" class="form-label">禁用边界</label>
              <input type="text" id="example-boundaries" class="form-control" name="example-boundaries" value="1234567890" />
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label for="example-vertical" class="form-label">按钮垂直对齐</label>
              <input type="text" id="example-vertical" class="form-control" value="" name="example-vertical" />
            </div>
            <div class="mb-3">
              <label for="example-icon-vertical" class="form-label">带有自定义图标的垂直按钮</label>
              <input type="text" id="example-icon-vertical" class="form-control" value="" name="example-icon-vertical" />
            </div>
            <div class="mb-3">
              <label for="example-callback" class="form-label">使用numeraljs格式化数字的回调示例（可以使用任何其他方法）</label>
              <input type="text" id="example-callback" name="example-callback" class="form-control"
                value="10000.00"
                data-bts-min="-1000000"
                data-bts-max="1000000"
                data-bts-step=".01"
                data-bts-decimals="2"  />
            </div>
            <div class="mb-3">
              <label for="example-initval" class="form-label">初始化数值（输入框可用<code>input-sm</code>、<code>input-lg</code>指定大小）</label>
              <input type="text" id="example-initval" class="form-control" name="example-initval" />
            </div>
            <div class="mb-3">
              <label for="example-button-group" class="form-label">按钮组</label>
              <div class="input-group">
                <input type="text" id="example-button-group" class="form-control" name="example-button-group" value="50" />
        
                <button type="button" class="btn btn-default">Action</button>
                <button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
                  <span class="caret"></span>
                  <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                  <li><div role="separator" class="dropdown-divider"></div></li>
                  <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
              </div>
            </div>
            <div class="mb-3">
              <label for="example-replaced" class="form-label">空白/非数字替换</label>
              <input type="text" id="example-replaced" class="form-control" name="example-replaced" value="50" />
            </div>
            <div class="mb-3">
              <label for="example-event" class="form-label">事件示例</label>
              <input type="text" id="example-event" class="form-control" name="example-event" value="50" />
            </div>
          </div>
          <div class="col-md-12">
            <pre id="pretextarea" style="height:200px;overflow:auto;"></pre>
          </div>
        </div>
        
        </div>
      </div>
  </div>

</div>

<script type="text/javascript">
    $(document).ready(function(){
        // 使用data-属性配置示例
        $("#example-attr").TouchSpin({});
        // 后缀的示例
        $("#example-postfix").TouchSpin({
            min: 0,
            max: 100,
            step: 0.1,
            decimals: 2,
            boostat: 5,
            maxboostedstep: 10,
            postfix: '%'
        });
        // 前缀的示例
        $("#example-prefix").TouchSpin({
            min: -1000000000,
            max: 1000000000,
            stepinterval: 50,
            maxboostedstep: 10000000,
            prefix: '¥'
        });
        // 按钮垂直对齐
        $("#example-vertical").TouchSpin({
            verticalbuttons: true,
        });
        // 带有自定义图标的垂直按钮
        $("#example-icon-vertical").TouchSpin({
            verticalbuttons: true,
            verticalup: '<i class="mdi mdi-chevron-up"></i>',
            verticaldown: '<i class="mdi mdi-chevron-down"></i>'
        });
        // 使用numeraljs格式化数字的回调示例
        numeral.locale('chs');
        $("#example-callback").TouchSpin({
            callback_before_calculation: function (v) {
                return numeral(v).value();
            },
            callback_after_calculation: function (v) {
                return numeral(v).format("$0,0.00");
            }
        });
        // 空值的初始化
        $("#example-empty").TouchSpin();
        // 初始化数值
        $("#example-initval").TouchSpin({
            initval: 40
        });
        // 按钮后缀
        $("#example-button-postfix").TouchSpin({
            postfix: "一个按钮",
            //postfix_extraclass: "btn btn-info"
        });
        // 按钮组
        $("#example-button-group").TouchSpin({
            prefix: "pre",
            postfix: "post"
        });
        // 更改按钮类
        $("#example-button-class").TouchSpin({
            buttondown_class: "btn btn-link",
            buttonup_class: "btn btn-link"
        });
        // 空白/非数字替换，输入空或者非数字时会被替换成10
        $("#example-replaced").TouchSpin({
            replacementval: 10
        });
        // 禁用边界
        $("#example-boundaries").TouchSpin({
            min: null,
            max: null
        });
        // 事件示例
        var i = $("#example-event"),
            demoarea = $("#pretextarea"),
            text = "";
    
        function writeLine(line) {
            text += line + "\n";
            demoarea.text(text);
            demoarea.scrollTop(
                demoarea[0].scrollHeight - demoarea.height()
            );
        }
    
        i.TouchSpin({});
        i.on("touchspin.on.startspin", function () {
            writeLine("touchspin.on.startspin");
        });
        i.on("touchspin.on.startupspin", function () {
            writeLine("touchspin.on.startupspin");
        });
        i.on("touchspin.on.startdownspin", function () {
            writeLine("touchspin.on.startdownspin");
        });
        i.on("touchspin.on.stopspin", function () {
            writeLine("touchspin.on.stopspin");
        });
        i.on("touchspin.on.stopupspin", function () {
            writeLine("touchspin.on.stopupspin");
        });
        i.on("touchspin.on.stopdownspin", function () {
            writeLine("touchspin.on.stopdownspin");
        });
        i.on("touchspin.on.min", function () {
            writeLine("touchspin.on.min");
        });
        i.on("touchspin.on.max", function () {
            writeLine("touchspin.on.max");
        });
    });
    </script>